<template>
	<div class="body">
		<el-row :gutter="20">
		  <el-col :span="8">
			  <div class="block">
				  <div class="title">空调设备运行状态</div>
				  <div class="chose">
					<el-tabs v-model="activeName">
					    <el-tab-pane label="全部" name="all"></el-tab-pane>
					    <el-tab-pane label="主楼" name="primary"></el-tab-pane>
					    <el-tab-pane label="副楼" name="assistant"></el-tab-pane>
					</el-tabs>
				  </div>
				  <hr class="divide"/>
				  <div class="tag">
					  <el-row>
					    <el-col :span="8">
							<div class="tag-block">
								<img src="@/assets/img/moving.png"/>
								<div style="margin-left: 5px;">
									<div class="tag-title">运行中</div>
									<div class="tag-num">129</div>
								</div>
							</div>
						</el-col>
					    <el-col :span="8">
							<div class="tag-block">
								<img src="@/assets/img/close.png" />
								<div style="margin-left: 5px;">
									<div class="tag-title">已关闭</div>
									<div class="tag-num">5</div>
								</div>
							</div>
						</el-col>
					    <el-col :span="8">
							<div class="tag-block">
								<img src="@/assets/img/hitch.png" />
								<div style="margin-left: 5px;">
									<div class="tag-title">故障</div>
									<div class="tag-num" style="color: #F02E2E;">8</div>
								</div>
							</div>
						</el-col>
					  </el-row>
				  </div>
				  <div class="air-list">
					  <div v-for="(item,index) of list" :key="index" style="margin-bottom: 18px;">
						  <el-row>
							<el-col :span="5">
								<div class="air-list-content">{{ item.name }}</div>
							</el-col>
							<el-col :span="5">
								<div class="air-list-content" style="color: #58A55C;">{{ item.status }}</div>
							</el-col>
							<el-col :span="5">
								<div class="air-list-content" style="color: #D79A17;">{{ item.moving }}</div>
							</el-col>
							<el-col :span="5">
								<div class="air-list-content">{{ item.function }}</div>
							</el-col>
							<el-col :span="4">
								<div class="air-list-content">{{ item.temperature }}</div>
							</el-col>
						  </el-row>
					  </div>
				  </div>
			  </div>
		  </el-col>
		  <el-col :span="8">
			  <div class="block">
				  <div class="title">新风系统设备运行状态</div>
				  <div class="chose">
					<el-tabs v-model="activeName2">
						<el-tab-pane label="全部" name="all"></el-tab-pane>
						<el-tab-pane label="主楼" name="primary"></el-tab-pane>
						<el-tab-pane label="副楼" name="assistant"></el-tab-pane>
					</el-tabs>
				  </div>
				  <hr class="divide"/>
				  <div class="tag">
					  <el-row>
						<el-col :span="8">
							<div class="tag-block">
								<img src="@/assets/img/moving.png"/>
								<div style="margin-left: 5px;">
									<div class="tag-title">运行中</div>
									<div class="tag-num">129</div>
								</div>
							</div>
						</el-col>
						<el-col :span="8">
							<div class="tag-block">
								<img src="@/assets/img/close.png" />
								<div style="margin-left: 5px;">
									<div class="tag-title">已关闭</div>
									<div class="tag-num">5</div>
								</div>
							</div>
						</el-col>
						<el-col :span="8">
							<div class="tag-block">
								<img src="@/assets/img/hitch.png" />
								<div style="margin-left: 5px;">
									<div class="tag-title">故障</div>
									<div class="tag-num" style="color: #F02E2E;">8</div>
								</div>
							</div>
						</el-col>
					  </el-row>
				  </div>
				  <div class="air-list">
					  <div v-for="(item,index) of list2" :key="index" style="margin-bottom: 18px;">
						  <el-row>
							<el-col :span="5">
								<div class="air-list-content">{{ item.name }}</div>
							</el-col>
							<el-col :span="5">
								<div class="air-list-content" style="color: #58A55C;">{{ item.status }}</div>
							</el-col>
							<el-col :span="14">
								<div class="air-list-content" style="color: #D79A17;text-align: right;padding-right: 40px;">{{ item.moving }}</div>
							</el-col>
						  </el-row>
				  	  </div>
				  </div>
			  </div>
		  </el-col>
		  <el-col :span="8">
			  <div class="block">
				  <div class="title">消防设备运行状态</div>
				  <div class="chose">
					<el-tabs v-model="activeName3">
						<el-tab-pane label="全部" name="all"></el-tab-pane>
						<el-tab-pane label="主楼" name="primary"></el-tab-pane>
						<el-tab-pane label="副楼" name="assistant"></el-tab-pane>
					</el-tabs>
				  </div>
				  <hr class="divide"/>
				  <div class="tag">
					  <el-row>
						<el-col :span="8">
							<div class="tag-block">
								<img src="@/assets/img/moving.png"/>
								<div style="margin-left: 5px;">
									<div class="tag-title">运行中</div>
									<div class="tag-num">129</div>
								</div>
							</div>
						</el-col>
						<el-col :span="8">
							<div class="tag-block">
								<img src="@/assets/img/close.png" />
								<div style="margin-left: 5px;">
									<div class="tag-title">已关闭</div>
									<div class="tag-num">5</div>
								</div>
							</div>
						</el-col>
						<el-col :span="8">
							<div class="tag-block">
								<img src="@/assets/img/hitch.png" />
								<div style="margin-left: 5px;">
									<div class="tag-title">故障</div>
									<div class="tag-num" style="color: #F02E2E;">8</div>
								</div>
							</div>
						</el-col>
					  </el-row>
				  </div>
				  <div class="air-list">
					  <div v-for="(item,index) of list3" :key="index" style="margin-bottom: 18px;">
						  <el-row>
							<el-col :span="5">
								<div class="air-list-content">{{ item.name }}</div>
							</el-col>
							<el-col :span="5">
								<div v-if="item.status === '正常'" class="air-list-content" style="color: #58A55C;">{{ item.status }}</div>
								<div v-else class="air-list-content" style="color: #F02E2E;">{{ item.status }}</div>
							</el-col>
							<el-col :span="5">
								<div class="air-list-content" style="color: #D79A17;">{{ item.mpa }}</div>
							</el-col>
							<el-col :span="9">
								<div class="air-list-content" style="color: #D79A17;">{{ item.m }}</div>
							</el-col>
						  </el-row>
				  	  </div>
				  </div>
			  </div>
		  </el-col>
		</el-row>
		<div style="width: 100%;height: 20px;"></div>
		<el-row :gutter="20">
		  <el-col :span="8">
			  <div class="block">
				  <div class="title">排污泵设备运行状态</div>
				  <hr class="divide"/>
				  <div class="tag">
					  <el-row>
						<el-col :span="8">
							<div class="tag-block">
								<img src="@/assets/img/moving.png"/>
								<div style="margin-left: 5px;">
									<div class="tag-title">运行中</div>
									<div class="tag-num">129</div>
								</div>
							</div>
						</el-col>
						<el-col :span="8">
							<div class="tag-block">
								<img src="@/assets/img/close.png" />
								<div style="margin-left: 5px;">
									<div class="tag-title">已关闭</div>
									<div class="tag-num">5</div>
								</div>
							</div>
						</el-col>
						<el-col :span="8">
							<div class="tag-block">
								<img src="@/assets/img/hitch.png" />
								<div style="margin-left: 5px;">
									<div class="tag-title">故障</div>
									<div class="tag-num" style="color: #F02E2E;">8</div>
								</div>
							</div>
						</el-col>
					  </el-row>
				  </div>
				  <div class="air-list">
					  <div v-for="(item,index) of list2" :key="index" style="margin-bottom: 18px;">
						  <el-row>
							<el-col :span="5">
								<div class="air-list-content">{{ item.name }}</div>
							</el-col>
							<el-col :span="5">
								<div class="air-list-content" style="color: #58A55C;">{{ item.status }}</div>
							</el-col>
							<el-col :span="14">
								<div class="air-list-content" style="color: #D79A17;text-align: right;padding-right: 40px;">{{ item.moving }}</div>
							</el-col>
						  </el-row>
				  	  </div>
				  </div>
			  </div>
		  </el-col>
		  <el-col :span="16">
			  <div class="block">
				  <div class="title">照明控制状态</div>
				  <div class="chose">
					<el-tabs v-model="activeName4">
						<el-tab-pane label="主楼" name="primary"></el-tab-pane>
						<el-tab-pane label="副楼" name="assistant"></el-tab-pane>
					</el-tabs>
				  </div>
				  <hr class="divide"/>
				  <div class="list">
				  	<el-row>
				  		<el-col :span="2">
				  			<div class="circle"></div>
				  			<div class="describe">北楼梯灯</div>
				  		</el-col>
				  		<el-col :span="2">
				  			<div class="circle"></div>
				  			<div class="describe">北楼梯灯</div>
				  		</el-col>
				  		<el-col :span="2">
				  			<div class="circle"></div>
				  			<div class="describe">北楼梯灯</div>
				  		</el-col>
				  		<el-col :span="2">
				  			<div class="circle"></div>
				  			<div class="describe">北楼梯灯</div>
				  		</el-col>
				  		<el-col :span="2">
				  			<div class="circle"></div>
				  			<div class="describe">北楼梯灯</div>
				  		</el-col>
						<el-col :span="2">
							<div class="circle"></div>
							<div class="describe">北楼梯灯</div>
						</el-col>
						<el-col :span="2">
							<div class="circle"></div>
							<div class="describe">北楼梯灯</div>
						</el-col>
						<el-col :span="2">
							<div class="circle"></div>
							<div class="describe">北楼梯灯</div>
						</el-col>
						<el-col :span="2">
							<div class="circle"></div>
							<div class="describe">北楼梯灯</div>
						</el-col>
						<el-col :span="2">
							<div class="circle"></div>
							<div class="describe">北楼梯灯</div>
						</el-col>
				  		<el-col :span="2">
				  			<div class="circle" style="background-color: #907C7C;"></div>
				  			<div class="describe">北楼梯灯</div>
				  		</el-col>
				  	</el-row>
				  </div>
				  <div class="list">
				  	<el-row>
				  		<el-col :span="2">
				  			<div class="circle"></div>
				  			<div class="describe">北楼梯灯</div>
				  		</el-col>
				  		<el-col :span="2">
				  			<div class="circle"></div>
				  			<div class="describe">北楼梯灯</div>
				  		</el-col>
				  		<el-col :span="2">
				  			<div class="circle"></div>
				  			<div class="describe">北楼梯灯</div>
				  		</el-col>
				  		<el-col :span="2">
				  			<div class="circle"></div>
				  			<div class="describe">北楼梯灯</div>
				  		</el-col>
				  		<el-col :span="2">
				  			<div class="circle"></div>
				  			<div class="describe">北楼梯灯</div>
				  		</el-col>
						<el-col :span="2">
							<div class="circle"></div>
							<div class="describe">北楼梯灯</div>
						</el-col>
						<el-col :span="2">
							<div class="circle"></div>
							<div class="describe">北楼梯灯</div>
						</el-col>
						<el-col :span="2">
							<div class="circle"></div>
							<div class="describe">北楼梯灯</div>
						</el-col>
						<el-col :span="2">
							<div class="circle"></div>
							<div class="describe">北楼梯灯</div>
						</el-col>
						<el-col :span="2">
							<div class="circle"></div>
							<div class="describe">北楼梯灯</div>
						</el-col>
				  		<el-col :span="2">
				  			<div class="circle" style="background-color: #907C7C;"></div>
				  			<div class="describe">北楼梯灯</div>
				  		</el-col>
				  	</el-row>
				  </div>
				  <div class="list">
				  	<el-row>
				  		<el-col :span="2">
				  			<div class="circle"></div>
				  			<div class="describe">北楼梯灯</div>
				  		</el-col>
				  		<el-col :span="2">
				  			<div class="circle"></div>
				  			<div class="describe">北楼梯灯</div>
				  		</el-col>
				  		<el-col :span="2">
				  			<div class="circle"></div>
				  			<div class="describe">北楼梯灯</div>
				  		</el-col>
				  		<el-col :span="2">
				  			<div class="circle"></div>
				  			<div class="describe">北楼梯灯</div>
				  		</el-col>
				  		<el-col :span="2">
				  			<div class="circle"></div>
				  			<div class="describe">北楼梯灯</div>
				  		</el-col>
						<el-col :span="2">
							<div class="circle"></div>
							<div class="describe">北楼梯灯</div>
						</el-col>
						<el-col :span="2">
							<div class="circle"></div>
							<div class="describe">北楼梯灯</div>
						</el-col>
						<el-col :span="2">
							<div class="circle"></div>
							<div class="describe">北楼梯灯</div>
						</el-col>
						<el-col :span="2">
							<div class="circle"></div>
							<div class="describe">北楼梯灯</div>
						</el-col>
						<el-col :span="2">
							<div class="circle"></div>
							<div class="describe">北楼梯灯</div>
						</el-col>
				  		<el-col :span="2">
				  			<div class="circle" style="background-color: #907C7C;"></div>
				  			<div class="describe">北楼梯灯</div>
				  		</el-col>
				  	</el-row>
				  </div>
				  <div class="list" style="display: flex;margin-left: 0;">
				  	<div class="bottom">
				  		<div class="circle" style="margin: 0;"></div><span style="color: #AEC0D3;">运行</span>
				  		<div style="width: 20px;"></div>
				  		<div class="circle" style="margin: 0;background-color: #907C7C;"></div><span style="color: #AEC0D3;">关闭</span>
				  	</div>
				  </div>
			  </div>
		  </el-col>
		</el-row>
		<div style="width: 100%;height: 20px;"></div>
		<el-row :gutter="20">
		  <el-col :span="6">
			  <div class="block">
				  <div class="title">梯控设备运行状态</div>
				  <hr class="divide"/>
				  <div style="position: relative;top: 50px;">
					  <el-row>
					    <el-col :span="8" style="display: flex;justify-content: center;">
							<el-progress type="circle" :percentage="100" :width="82" :stroke-width="10" :format="format"></el-progress>
						</el-col>
					    <el-col :span="8" style="display: flex;justify-content: center;">
					  		<el-progress type="circle" :percentage="100" :width="82" :stroke-width="10" :format="format2"></el-progress>
					  	</el-col>
					    <el-col :span="8" style="display: flex;justify-content: center;">
					  		<el-progress type="circle" :percentage="100" :width="82" :stroke-width="10" :format="format3"></el-progress>
					  	</el-col>
					  </el-row>
				  </div>
				  <div class="chart-pie-ele" id="chart-pie-ele"></div>
			  </div>
		  </el-col>
		  <el-col :span="9">
			  <div class="block">
				  <div class="title">各时段电梯载重负荷(单位：%)</div>
				  <div class="chose">
					<el-tabs v-model="activeName5">
						<el-tab-pane label="主楼" name="primary"></el-tab-pane>
						<el-tab-pane label="副楼" name="assistant"></el-tab-pane>
					</el-tabs>
				  </div>
				  <hr class="divide"/>
				  <div class="chart-container-ele" id="chart-container-ele"></div>
			  </div>
		  </el-col>
		  <el-col :span="9">
		  	  <div class="block">
				  <div class="title">各时段电梯停留楼层流量分析(单位：次)</div>
				  <div class="chose">
					<el-tabs v-model="activeName6">
						<el-tab-pane label="主楼" name="primary"></el-tab-pane>
						<el-tab-pane label="副楼" name="assistant"></el-tab-pane>
					</el-tabs>
				  </div>
				  <hr class="divide"/>
				  <div class="chart-container" id="chart-container"></div>
			  </div>
		  </el-col>
		</el-row>
		<div style="width: 100%;height: 20px;"></div>
		<el-row :gutter="20">
		  <el-col :span="12">
			  <div class="block" style="height: 684px;">
				  <div class="title">用电能耗数据统计</div>
				  <hr class="divide"/>
				  <div class="statistic">
					  <el-row>
						<el-col :span="8">
							<div class="bolck">
								<div class="bolck-title">当日用电量（kWh）</div>
								<div class="num">27,900</div>
							</div>
						</el-col>
						<el-col :span="8" style="position: relative;">
							<div class="bolck">
								<div class="bolck-title">本月用电量（kWh）</div>
								<div class="num">45,900</div>
							</div>
						</el-col>
						<el-col :span="8" style="position: relative;">
							<div class="bolck">
								<div class="bolck-title">本年度用电量（kWh）</div>
								<div class="num">445,900</div>
							</div>
						</el-col>
					  </el-row>
				  </div>
				  <div class="title" style="top: 205px;">年度用电数据</div>
				  <div class="chart-container2" id="chart-container2"></div>
				   <div class="title" style="top: 455px;">分项用电统计</div>
				   <div class="time-btn">
				       <el-radio-group v-model="radio" size="mini">
				         <el-radio-button label="日"></el-radio-button>
				         <el-radio-button label="月"></el-radio-button>
				         <el-radio-button label="年"></el-radio-button>
				       </el-radio-group>
				  </div>
				  <div class="chart-container-pie" id="chart-container-pie"></div>
			  </div>
		  </el-col>
		  <el-col :span="12">
			  <div class="block" style="height: 684px;">
				  <div class="title">用水能耗数据统计</div>
				  <hr class="divide"/>
				  <div class="statistic">
					  <el-row>
						<el-col :span="8">
							<div class="bolck">
								<div class="bolck-title">当日用电水量（m³）</div>
								<div class="num" style="color: #D35E5E;">17,900</div>
							</div>
						</el-col>
						<el-col :span="8" style="position: relative;">
							<div class="bolck">
								<div class="bolck-title">本月用水量（m³）</div>
								<div class="num" style="color: #D35E5E;">43,800</div>
							</div>
						</el-col>
						<el-col :span="8" style="position: relative;">
							<div class="bolck">
								<div class="bolck-title">本年度用水量（m³）</div>
								<div class="num" style="color: #D35E5E;">65,800</div>
							</div>
						</el-col>
					  </el-row>
				  </div>
				  <div class="title" style="top: 205px;">年度用水数据</div>
				  <div class="chart-container2" id="chart-container3"></div>
				  <div class="title" style="top: 455px;">分项用水统计</div>
				  <div class="time-btn">
				       <el-radio-group v-model="radio2" size="mini">
				         <el-radio-button label="日"></el-radio-button>
				         <el-radio-button label="月"></el-radio-button>
				         <el-radio-button label="年"></el-radio-button>
				       </el-radio-group>
				  </div>
				  <div class="chart-container-pie" id="chart-container-pie2"></div>
			  </div>
		  </el-col>
		</el-row>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				activeName: 'all',
				activeName2: 'all',
				activeName3: 'all',
				activeName4: 'primary',
				activeName5: 'primary',
				activeName6: 'primary',
				radio: '日',
				radio2: '日',
				list:[
					{
						name: '空调1号',
						status: '正常',
						moving: '运行中',
						function: '制冷',
						temperature: '24°C',
					},
					{
						name: '空调2号',
						status: '正常',
						moving: '运行中',
						function: '制冷',
						temperature: '24°C',
					},
					{
						name: '空调3号',
						status: '正常',
						moving: '运行中',
						function: '制冷',
						temperature: '24°C',
					},
					{
						name: '空调4号',
						status: '正常',
						moving: '运行中',
						function: '制冷',
						temperature: '24°C',
					},
					{
						name: '空调5号',
						status: '正常',
						moving: '运行中',
						function: '制冷',
						temperature: '24°C',
					},
					{
						name: '空调6号',
						status: '正常',
						moving: '运行中',
						function: '制冷',
						temperature: '24°C',
					}
				],
				list2: [
					{
						name: '新风机1号',
						status: '正常',
						moving: '运行中'
					},
					{
						name: '新风机2号',
						status: '正常',
						moving: '运行中'
					},
					{
						name: '新风机3号',
						status: '正常',
						moving: '运行中'
					},
					{
						name: '新风机4号',
						status: '正常',
						moving: '运行中'
					},
					{
						name: '新风机5号',
						status: '正常',
						moving: '运行中'
					},
					{
						name: '新风机6号',
						status: '正常',
						moving: '运行中'
					}
				],
				list3: [
					{
						name: '空调2号',
						status: '水压过高',
						mpa: '3.2',
						m: '--'
					},
					{
						name: '空调3号',
						status: '正常',
						mpa: '--',
						m: '30.2'
					},
					{
						name: '空调4号',
						status: '正常',
						mpa: '--',
						m: '30.2'
					},{
						name: '空调5号',
						status: '正常',
						mpa: '--',
						m: '30.2'
					},{
						name: '空调6号',
						status: '正常',
						mpa: '--',
						m: '30.2'
					}
				],
				list4: [
					{
						name: '排水泵1号',
						status: '正常',
						moving: '运行中'
					},
					{
						name: '排水泵2号',
						status: '正常',
						moving: '运行中'
					},
					{
						name: '排水泵3号',
						status: '正常',
						moving: '运行中'
					},
					{
						name: '排水泵4号',
						status: '正常',
						moving: '运行中'
					},
					{
						name: '排水泵5号',
						status: '正常',
						moving: '运行中'
					},
					{
						name: '排水泵6号',
						status: '正常',
						moving: '运行中'
					}
				]
			};
		},
		mounted() {
			this.eleAnalyse()
			this.yearEle()
			this.yearEle2()
			this.pieChart()
			this.pieChart2()
			this.pieEle()
			this.lineChartEle()
		},
		methods: {
			eleAnalyse() {
				var dom = document.getElementById('chart-container');
				var myChart = this.$echarts.init(dom, null, {
				  renderer: 'canvas',
				  useDirtyRect: false
				});
				var app = {};
				
				var option;
				
				option = {
				  tooltip: {
				    trigger: 'axis',
				    axisPointer: {
				      // Use axis to trigger tooltip
				      type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
				    }
				  },
				  legend: {},
				  grid: {
				    left: '3%',
				    right: '4%',
				    bottom: '3%',
				    containLabel: true
				  },
				  xAxis: {
				    type: 'category',
					data: ['2时', '4时', '6时', '8时', '10时', '12时', '14时', '16时', '18时', '20时', '22时']
				  },
				  yAxis: {
				    type: 'value',
					min: 0,
					max: 1200
				  },
				  series: [
				    {
				      name: 'F1层',
				      type: 'bar',
				      stack: 'total',
				      emphasis: {
				        focus: 'series'
				      },
				      data: [320, 302, 301, 334, 390, 330, 320, 320, 302, 301, 334]
				    },
				    {
				      name: 'F2层',
				      type: 'bar',
				      stack: 'total',
				      emphasis: {
				        focus: 'series'
				      },
				      data: [120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134]
				    },
				    {
				      name: 'F3层',
				      type: 'bar',
				      stack: 'total',
				      emphasis: {
				        focus: 'series'
				      },
				      data: [220, 182, 191, 234, 290, 130, 110, 220, 182, 191, 234]
				    },
				    {
				      name: 'F4层',
				      type: 'bar',
				      stack: 'total',
				      emphasis: {
				        focus: 'series'
				      },
				      data: [150, 212, 201, 154, 190, 130, 110, 150, 212, 201, 154,]
				    },
				    {
				      name: 'F5层',
				      type: 'bar',
				      stack: 'total',
				      emphasis: {
				        focus: 'series'
				      },
				      data: [120, 132, 190, 134, 120, 130, 130, 120, 132, 101, 234]
				    },
					{
					  name: 'F6层',
					  type: 'bar',
					  stack: 'total',
					  emphasis: {
					    focus: 'series'
					  },
					  data: [120, 132, 190, 134, 120, 130, 130, 120, 132, 101, 234]
					},
					{
					  name: 'F7层',
					  type: 'bar',
					  stack: 'total',
					  emphasis: {
					    focus: 'series'
					  },
					  data: [120, 132, 190, 134, 120, 130, 130, 120, 132, 101, 234]
					}
				  ]
				};
				
				if (option && typeof option === 'object') {
				  myChart.setOption(option);
				}
				
				window.addEventListener('resize', myChart.resize);
			},
			
			yearEle() {
				var dom = document.getElementById('chart-container2');
				var myChart = this.$echarts.init(dom, null, {
				  renderer: 'canvas',
				  useDirtyRect: false
				});
				var app = {};
				var option;
				
				option = {
				  tooltip: {
				    trigger: 'axis'
				  },
				  legend: {
				    data: ['今年', '去年', '同比节能']
				  },
				  calculable: true,
				  xAxis: [
				    {
				      type: 'category',
				      // prettier-ignore
				      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
				    }
				  ],
				  yAxis: [
				    {
				      type: 'value',
					  min: 0,
					  max: 250
				    }
				  ],
				  series: [
				    {
				      name: '今年',
				      type: 'bar',
				      data: [
				        20, 49, 70, 122, 156, 76, 135, 162, 132, 200, 64, 133
				      ]
				    },
				    {
				      name: '去年',
				      type: 'bar',
				      data: [
				        126, 59, 90, 164, 87, 70, 175, 182, 48, 188, 60, 123
				      ]
				    },
				     {
				      name: '同比节能',
				      type: 'line',
				      data:  [
				        20, 49, 70, 122, 156, 76, 135, 162, 132, 200, 64, 133
				      ]
				    }
				  ]
				};
				
				if (option && typeof option === 'object') {
				  myChart.setOption(option);
				}
				
				window.addEventListener('resize', myChart.resize);
			},
			
			yearEle2() {
				var dom = document.getElementById('chart-container3');
				var myChart = this.$echarts.init(dom, null, {
				  renderer: 'canvas',
				  useDirtyRect: false
				});
				var app = {};
				
				var option;
				
				option = {
				  tooltip: {
				    trigger: 'axis'
				  },
				  legend: {
				    data: ['今年', '去年', '同比节能']
				  },
				  calculable: true,
				  xAxis: [
				    {
				      type: 'category',
				      // prettier-ignore
				      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
				    }
				  ],
				  yAxis: [
				    {
				      type: 'value',
					  min: 0,
					  max: 250
				    }
				  ],
				  series: [
				    {
				      name: '今年',
				      type: 'bar',
				      data: [
				        20, 49, 70, 122, 156, 76, 135, 162, 132, 200, 64, 133
				      ]
				    },
				    {
				      name: '去年',
				      type: 'bar',
				      data: [
				        126, 59, 90, 164, 87, 70, 175, 182, 48, 188, 60, 123
				      ]
				    },
				     {
				      name: '同比节能',
				      type: 'line',
				      data:  [
				        20, 49, 70, 122, 156, 76, 135, 162, 132, 200, 64, 133
				      ]
				    }
				  ]
				};
				
				if (option && typeof option === 'object') {
				  myChart.setOption(option);
				}
				
				window.addEventListener('resize', myChart.resize);
			},
			
			pieChart() {
				var dom = document.getElementById('chart-container-pie');
				var myChart = this.$echarts.init(dom, null, {
				  renderer: 'canvas',
				  useDirtyRect: false
				});
				var app = {};
				
				var option;
				
				var option;
				
				option = {
				  tooltip: {
				    trigger: 'item'
				  },
				  legend: {
					orient: 'vertical',
					top: '5%',
				    left: '5%',
				  		textStyle: {
				  		  color: "#86AED5"
				  		},
				  },
				  series: [
				    {
				      type: 'pie',
				      radius: ['40%', '70%'],
					  center: ['45%', '45%'],
				      avoidLabelOverlap: false,
				      itemStyle: {
				        borderRadius: 6,
				        borderWidth: 2
				      },
				      label: {
				        show: true,
				      },
				      emphasis: {
				        label: {
				          show: true,
				          fontSize: 18,
				          fontWeight: 'bold'
				        }
				      },
				      labelLine: {
				        show: true
				      },
				      data: [
				        { 
							value: 735, 
							name: '主楼1层-1001',
							label: {
								color: '#000000',
								textBorderColor: '#000000',
								formatter: '主楼1层-1001' + '\n' + '100kWh'
							}
						},
				        { 
							value: 580, 
							name: '主楼2层-1002',
							label: {
								color: '#000000',
								textBorderColor: '#000000',
								formatter: '主楼2层-1002' + '\n' + '150kWh'
							}
						},
				        { 
							value: 484,
							name: '副楼2层-1002',
							label: {
								color: '#000000',
								textBorderColor: '#000000',
								formatter: '副楼2层-1002' + '\n' + '195kWh'
							}
						},
				        { 
							value: 300, 
							name: '副楼3层-3002',
							label: {
								color: '#000000',
								textBorderColor: '#000000',
								formatter: '副楼3层-3002' + '\n' + '176kWh'
							}
						},
						{
							value: 300, 
							name: '其他',
							label: {
								color: '#000000',
								textBorderColor: '#000000',
								formatter: '其他' + '\n' + '119kWh'
							}
						}
				      ],
				    }
				  ]
				};
				
				if (option && typeof option === 'object') {
				  myChart.setOption(option);
				}
				
				window.addEventListener('resize', myChart.resize);
			},
			
			pieChart2() {
				var dom = document.getElementById('chart-container-pie2');
				var myChart = this.$echarts.init(dom, null, {
				  renderer: 'canvas',
				  useDirtyRect: false
				});
				var app = {};
				
				var option;
				
				var option;
				
				option = {
				  tooltip: {
				    trigger: 'item'
				  },
				  legend: {
					orient: 'vertical',
					top: '5%',
				    left: '5%',
				  		textStyle: {
				  		  color: "#86AED5"
				  		},
				  },
				  series: [
				    {
				      type: 'pie',
				      radius: ['40%', '70%'],
					  center: ['45%', '45%'],
				      avoidLabelOverlap: false,
				      itemStyle: {
				        borderRadius: 6,
				        borderWidth: 2
				      },
				      label: {
				        show: true,
				      },
				      emphasis: {
				        label: {
				          show: true,
				          fontSize: 18,
				          fontWeight: 'bold'
				        }
				      },
				      labelLine: {
				        show: true
				      },
				      data: [
				        { 
							value: 735, 
							name: '主楼1层-1001',
							label: {
								color: '#000000',
								textBorderColor: '#000000',
								formatter: '主楼1层-1001' + '\n' + '100kWh'
							}
						},
				        { 
							value: 580, 
							name: '主楼2层-1002',
							label: {
								color: '#000000',
								textBorderColor: '#000000',
								formatter: '主楼2层-1002' + '\n' + '150kWh'
							}
						},
				        { 
							value: 484,
							name: '副楼2层-1002',
							label: {
								color: '#000000',
								textBorderColor: '#000000',
								formatter: '副楼2层-1002' + '\n' + '195kWh'
							}
						},
				        { 
							value: 300, 
							name: '副楼3层-3002',
							label: {
								color: '#000000',
								textBorderColor: '#000000',
								formatter: '副楼3层-3002' + '\n' + '176kWh'
							}
						},
						{
							value: 300, 
							name: '其他',
							label: {
								color: '#000000',
								textBorderColor: '#000000',
								formatter: '其他' + '\n' + '119kWh'
							}
						}
				      ],
				    }
				  ]
				};
				
				if (option && typeof option === 'object') {
				  myChart.setOption(option);
				}
				
				window.addEventListener('resize', myChart.resize);
			},
			
			pieEle() {
				var dom = document.getElementById('chart-pie-ele');
				var myChart = this.$echarts.init(dom, null, {
				  renderer: 'canvas',
				  useDirtyRect: false
				});
				var app = {};
				
				var option;
				
				var option;
				
				option = {
				  tooltip: {
				    trigger: 'item'
				  },
				  legend: {
					orient: 'vertical',
					top: '5%',
				    right: '5%',
				  		textStyle: {
				  		  color: "#86AED5"
				  		},
				  },
				  series: [
				    {
				      type: 'pie',
				      radius: ['40%', '70%'],
					  center: ['45%', '45%'],
				      avoidLabelOverlap: false,
				      itemStyle: {
				        borderRadius: 6,
				        borderWidth: 2
				      },
				      label: {
				        show: true,
				      },
				      emphasis: {
				        label: {
				          show: true,
				          fontSize: 18,
				          fontWeight: 'bold'
				        }
				      },
				      labelLine: {
				        show: true
				      },
				      data: [
				        { 
							value: 735, 
							name: '运行',
							label: {
								color: '#000000',
								textBorderColor: '#000000',
								formatter: '运行' + '\n' + '6'
							}
						},
				        { 
							value: 580, 
							name: '故障',
							label: {
								color: '#000000',
								textBorderColor: '#000000',
								formatter: '故障' + '\n' + '2'
							}
						},
				        { 
							value: 484,
							name: '报警',
							label: {
								color: '#000000',
								textBorderColor: '#000000',
								formatter: '报警' + '\n' + '1'
							}
						}
				      ],
				    }
				  ]
				};
				
				if (option && typeof option === 'object') {
				  myChart.setOption(option);
				}
				
				window.addEventListener('resize', myChart.resize);
			},
			
			lineChartEle(){
				var dom = document.getElementById('chart-container-ele');
				var myChart = this.$echarts.init(dom, null, {
				  renderer: 'canvas',
				  useDirtyRect: false
				});
				var app = {};
				
				var option;
				
				option = {
				  tooltip: {
				    trigger: 'axis'
				  },
				  legend: {
				    data: ['客梯001', '客梯002', '客梯003']
				  },
				  grid: {
				    left: '3%',
				    right: '4%',
				    bottom: '3%',
				    containLabel: true
				  },
				  xAxis: {
				    type: 'category',
				    boundaryGap: false,
				    data: ['0时', '1时', '3时', '5时', '7时', '9时', '11时', '13时', '15时', '17时', '19时', '21时', '23时']
				  },
				  yAxis: {
				    type: 'value',
					min: 0,
					max: 100
				  },
				  series: [
				    {
				      name: '客梯001',
				      type: 'line',
				      data: [30, 33, 31, 34, 90, 33, 32, 45, 87, 62, 15, 27, 58],
					  smooth: true
				    },
				    {
				      name: '客梯002',
				      type: 'line',
				      data: [20, 32, 91, 93, 29, 30, 20, 52, 32, 71, 83, 29, 39],
					  smooth: true
				    },
					{
					  name: '客梯003',
					  type: 'line',
					  data: [40, 52, 31, 33, 20, 80, 90, 32, 62, 71, 83, 29, 19],
					  smooth: true
					}
				  ]
				};
				
				if (option && typeof option === 'object') {
				  myChart.setOption(option);
				}
				
				window.addEventListener('resize', myChart.resize);
			},
			
			format(percentage) {
				return '9'
			},
			format2(percentage) {
				return '8'
			},
			format3(percentage) {
				return '1'
			},
		}
	}
</script>

<style scoped lang="scss">
.body {
	padding: 20px;
}
.chart-container {
  position: relative;
  overflow: hidden;
  top: 60px;
  width: 100%;
  height: 293px;
}
.chart-container2 {
	position: relative;
	overflow: hidden;
	top: 65px;
	width: 100%;
	height: 240px;
}
.chart-container-pie {
	position: relative;
	overflow: hidden;
	top: 74px;
	width: 100%;
	height: 207px;
}
.chart-container-ele {
	position: relative;
	overflow: hidden;
	top: 50px;
	width: 100%;
	height: 293px;
}
.chart-pie-ele {
	position: relative;
	overflow: hidden;
	top: 110px;
	width: 100%;
	height: 147px;
}
.block {
	width: 100%;
	height: 377px;
	border-radius: 8px;
	background-color: rgba(241, 243, 245, 1);
	border: 1px solid rgba(213, 213, 211, 1);
	position: relative;
}
.title {
	position: absolute;
	top: 20px;
	left: 20px;
	color: rgba(16, 16, 16, 1);
	font-size: 16px;
	text-align: left;
	font-family: SourceHanSansSC-regular;
}
.chose {
	position: absolute;
	top: 13px;
	right: 20px;
	width: 170px;
	height: 32px;
	display: flex;
	.bu {
		color: #86AED5;
		font-size: 16px;
	}
}
.blue {
	color: #33CCFF !important;
	border-bottom: 3px solid #33CCFF;
}
.divide {
	position: relative;
	top: 43px;
	width: 95%;
	opacity: 0.35;
	border: 1px solid rgba(213, 213, 211, 1);
}
.statistic {
	position: relative;
	top: 43px;
	width: 100%;
	height: 160px;
}
.bolck {
	height: 160px;
	width: 100%;
}
.bolck-title {
	text-align: center;
	line-height: 110px;
	margin-bottom: 10px;
	height: 20px;
	width: 100%;
	color: rgba(16, 16, 16, 1);
	font-size: 14px;
	font-family: SourceHanSansSC-regular;
}
.num {
	text-align: center;
	line-height: 110px;
	height: 40px;
	width: 100%;
	color: rgba(245, 176, 28, 1);
	font-size: 28px;
	font-family: SourceHanSansSC-regular;
}
.tag {
	position: relative;
	top: 43px;
	width: 100%;
	height: 80px;
}
.tag-block {
	width: 100%;
	height: 80px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.tag-title {
	color: rgba(16, 16, 16, 1);
	font-size: 14px;
	text-align: left;
	font-family: SourceHanSansSC-regular;
}
.tag-num {
	color: rgba(86, 163, 238, 1);
	font-size: 20px;
	text-align: left;
	font-family: SourceHanSansSC-regular;
}
.time-btn {
	position: absolute;
	right: 20px;
	top: 455px;
}
.list {
	width: 97%;
	height: 65px;
	position: relative;
	top: 63px;
	margin-left: 3%;
	.name {
		color: #AEC0D3;
		font-size: 16px;
		opacity: 0.65;
		position: relative;
		left: 22px;
	}
	.circle {
		width: 19px;
		height: 19px;
		line-height: 20px;
		border-radius: 50%;
		background-color: rgba(128, 228, 133, 1);
		border: 1px solid rgba(187, 187, 187, 1);
		margin: auto;
	}
	.describe {
		color: #56A3EE;
		font-size: 12px;
		text-align: center;
	}
	.bottom {
		position: relative;
		margin: auto;
		display: flex;
		width: 128px;
	}
}
.air-list {
	position: relative;
	top: 60px;
	width: 100%;
	height: 225px;
	overflow-y: auto;
}
.air-list-content {
	color: rgba(16, 16, 16, 1);
	font-size: 14px;
	text-align: center;
	font-family: SourceHanSansSC-regular;
}
</style>